上一篇學習了基礎的元件使用，那麼元件之間該如何串聯，一起使用呢？今天要來學習：

• 匯出與引入如何運作
• 匯出元件的二種方法

匯出與引入元件

我們可以透過匯出（export）及引入（import）來移動元件。實際看看例子吧：

可以看到在App.js 檔案裡的元件Gallery，這個元件是由 Gallery.js這個檔案中引入的。

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

我們使用以下來引入：

import Gallery from './Gallery.js';

來引入我們所需要的Gallery 元件。

這邊小小補充，也許你也看過這樣子的引入方法，省略了.js

import Gallery from './Gallery';

不論是'./Gallery.js' 或是 './Gallery' 都是行得通的，但是前者是更接近原生的 ES 模組（ES Modules）的方式。

那麼，在檔案 Galllery.js中又是如何呢？

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

這邊有二個元件一個是Gallery，一個是被Gallery所使用的Profile，因為 Profile 和Gallery在同一個檔案中使用（還記得每一個component 的定義都必須是在最高層級嗎？，因此毋需匯出。Gallery 則將它匯出以便在 App.js 的檔案中使用。這裡使用了export default 的語法，也就是「預設匯出」。除了預設匯出的方法，還有其他方法嗎？

匯出元件的二種方法

在JavaScript當中匯出元件有二種方法，分別是「預設匯出」（default exports）以及「具名匯出」（named exports）。我們可以在同樣的檔案同時使用它們。但需要注意的是，一個檔案只能擁有一個「預設匯出」，但可以有很多個「具名匯出」。關於這個說明，React官方文件給了我們很精美的圖示：

「預設」和「具名」分別又有不同的語法：

需要注意的是，當你選用什麼樣的方法匯出，則必須選用同樣的方法引入。

預設 VS 具名

1. 預設 (default)： 當你使用預設引入時，你可以在 import 關鍵字後面使用任何名稱。換句話說，你可以給你所引入的元件任何名稱。例如：

   import Banana from './Button.js';
   import Apple from './Button.js';
   import MyComponent from './Button.js';
   

   不論你使用何種名稱，這些都會提供相同的結果。

2. 具名（named）： 在具名引入時，名稱在兩邊都必須相符。意思是你需要明確地指定要引入的元件的名稱，而這些必須與被引入檔案中的名稱一致，例如：

   import { Button } from './Button.js'; // 正確
   import { Apple } from './Button.js';  // 錯誤，名稱不符
   import { MyComponent } from './Button.js'; // 錯誤，名稱不符
   

由於在具名引入中，名稱必須準確匹配，所以這些引入必須與被引入模組中的名稱一致。

使用時機

什麼時候該使用「預設」？什麼時候又該使用「具名」呢？其實這也沒有標準答案，有些開發者在只有一個元件的情況下，經常會選用預設匯出，但也有一些團隊避免混淆會固定擇一使用一方法。

參考資料

• React官方文件：Importing and Exporting Components
• The Joy of React by Josh W Comeau：Components